<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>东北药用植物种质资源保存信息网</title>
    <link rel="shortcut icon " href="js/plant.png">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/vue.js"></script>
    <link href="js/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="js/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #app {
            width: auto; /*宽度设置固定值*/
            margin: 10px auto;
            height: auto;
            vertical-align: middle;
        }

        img {
            margin: 5px;
        }

        p {
            text-align: center;
        }

        #ta {
            background-image: url("js/image/bg.png");

        }
    </style>
</head>
<body>
<div id="app" style="margin-top: 5%">
    <div style="margin-left: 15%;margin-bottom: 20px">
        <button type="button" class="btn btn-success btn-sm" @click="jump()">点击添加种质资源</button>
    </div>
    <table border="1" class="table table-bordered table-hover" style="margin-left: 15%;width: auto;text-align:center;"
           id="species">
        <tr id="tr1">
            <td @click="nextHtml($event)">
                <img src="js/image/renshen.png"/>
                <p>人参</p>
            </td>

            <td @click="nextHtml($event)">
                <img src="js/image/xiyangcan.png"/>
                <p>西洋参</p>
            </td>

            <td @click="nextHtml($event)">
                <img src="js/image/beixixin.png"/>
                <p>北细辛</p>
            </td>

            <td @click="nextHtml($event)">
                <img src="js/image/hcxx.png"/>
                <p>汉城细辛</p>
            </td>

            <td @click="nextHtml($event)">
                <img src="js/image/pbm.png"/>
                <p>平贝母</p>
            </td>
        </tr>
        <tr id="tr2">
            <td @click="nextHtml($event)">
                <img src="js/image/jiegeng.png"/>
                <p>桔梗</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/bhjg.png"/>
                <p>白花桔梗</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/hhwt.png"/>
                <p>黄花乌头</p>
            </td>

            <td @click="nextHtml($event)">
                <img src="js/image/bwt.png"/>
                <p>北乌头</p>
            </td>

            <td @click="nextHtml($event)">
                <img src="js/image/sy.png"/>
                <p>芍药</p>
            </td>
        </tr>
        <tr id="tr3">


            <td @click="nextHtml($event)">
                <img src="js/image/bx.png"/>
                <p>白鲜</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/huangjing.png"/>
                <p>黄精
                </p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/yuzhu.png"/>
                <p>玉竹</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/juandan.png"/>
                <p>卷丹</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/maobaihe.png"/>
                <p>毛百合</p>
            </td>
        </tr>
        <tr id="tr4">
            <td @click="nextHtml($event)">
                <img src="js/image/bf.png"/>
                <p>蝙蝠葛</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/dbtxl.png"/>
                <p>东北铁线莲</p>
            </td>

            <td @click="nextHtml($event)">
                <img src="js/image/cls.png"/>
                <p>穿龙薯蓣</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/cwj.png"/>
                <p>刺五加</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/dgwj.png"/>
                <p>短梗五加</p>
            </td>
        </tr>
        <tr id="tr5">
            <td @click="nextHtml($event)">
                <img src="js/image/dbtnx.png"/>
                <p>东北天南星</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/mghs.png"/>
                <p>蒙古黄芪</p>
            </td>

            <td @click="nextHtml($event)">
                <img src="js/image/mjhs.png"/>
                <p>膜荚黄芪</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/cxy.png"/>
                <p>朝鲜淫羊藿</p>
            </td>
            <td @click="nextHtml($event)">
                <img src="js/image/fxh.png"/>
                <p>凤仙花</p>
            </td>
        </tr>

    </table>


</div>
</body>
<script>

</script>
<script>
    const x = new Vue({
        el: '#app',
        data: {
            uploadList: [],
            file: '',
        },
        methods: {
            nextHtml(e) {
                var text = e.currentTarget.firstChild.nextElementSibling.innerHTML
                window.location.href = encodeURI("show.html?text=" + text)
            },
            jump(){
                window.location.href = encodeURI("add.html")
            }
        },


    })

</script>
</html>